<div class="row chartsBox">
    <div class="col-md-12 chartCon">
        <div id="ipTotal" class="chartStyle"></div>
        <div class="chartText">
            <i class="tipLogo yesterdayStyle1" data-toggle="tooltip" data-placement="top" title="昨日此时总计">
                昨
            </i>
            <span class="valColor yCurrentTotal yesterdayStyle2">暂无</span>
            <i class="tipLogo todayStyle1" data-toggle="tooltip" data-placement="top" title="今日此时总计">
                今
            </i>
            <span class="valColor tCurrentTotal todayStyle2">暂无</span>
            <i class="tipLogo totalStyle1" data-toggle="tooltip" data-placement="top" title="昨日总计">
                总
            </i>
            <span class="valColor yTotal totalStyle2">暂无</span>
        </div>
    </div>
</div>
<div class="row chartsBox">
    <div class="col-md-12 chartCon">
        <div id="badIp" class="chartStyle"></div>
        <div class="chartText">
            <i class="tipLogo yesterdayStyle1" data-toggle="tooltip" data-placement="top" title="昨日此时总计">
                昨
            </i>
            <span class="valColor yCurrentTotal yesterdayStyle2">暂无</span>
            <i class="tipLogo todayStyle1" data-toggle="tooltip" data-placement="top" title="今日此时总计">
                今
            </i>
            <span class="valColor tCurrentTotal todayStyle2">暂无</span>
            <i class="tipLogo totalStyle1" data-toggle="tooltip" data-placement="top" title="昨日总计">
                总
            </i>
            <span class="valColor yTotal totalStyle2">暂无</span>
        </div>
    </div>
</div>

<div class="row chartsBox">
    <div class="col-md-12 chartCon">
        <div id="shareUsers" class="chartStyle"></div>
        <div class="chartText">
            <i class="tipLogo yesterdayStyle1" data-toggle="tooltip" data-placement="top" title="昨日此时总计">
                昨
            </i>
            <span class="valColor yCurrentTotal yesterdayStyle2">暂无</span>
            <i class="tipLogo todayStyle1" data-toggle="tooltip" data-placement="top" title="今日此时总计">
                今
            </i>
            <span class="valColor tCurrentTotal todayStyle2">暂无</span>
            <i class="tipLogo totalStyle1" data-toggle="tooltip" data-placement="top" title="昨日总计">
                总
            </i>
            <span class="valColor yTotal totalStyle2">暂无</span>
        </div>
    </div>
</div>

<div class="row chartsBox">
    <div class="col-md-12 chartCon">
        <div id="activeUsers" class="chartStyle"></div>
        <div class="chartText">
            <i class="tipLogo yesterdayStyle1" data-toggle="tooltip" data-placement="top" title="昨日此时总计">
                昨
            </i>
            <span class="valColor yCurrentTotal yesterdayStyle2">暂无</span>
            <i class="tipLogo todayStyle1" data-toggle="tooltip" data-placement="top" title="今日此时总计">
                今
            </i>
            <span class="valColor tCurrentTotal todayStyle2">暂无</span>
            <i class="tipLogo totalStyle1" data-toggle="tooltip" data-placement="top" title="昨日总计">
                总
            </i>
            <span class="valColor yTotal totalStyle2">暂无</span>
        </div>
    </div>
</div>
<div class="row chartsBox">
    <div class="col-md-12 chartCon">
        <div id="articleTotal" class="chartStyle"></div>
        <div class="chartText">
            <i class="tipLogo yesterdayStyle1" data-toggle="tooltip" data-placement="top" title="昨日此时总计">
                昨
            </i>
            <span class="valColor yCurrentTotal yesterdayStyle2">暂无</span>
            <i class="tipLogo todayStyle1" data-toggle="tooltip" data-placement="top" title="今日此时总计">
                今
            </i>
            <span class="valColor tCurrentTotal todayStyle2">暂无</span>
            <i class="tipLogo totalStyle1" data-toggle="tooltip" data-placement="top" title="昨日总计">
                总
            </i>
            <span class="valColor yTotal totalStyle2">暂无</span>
        </div>
    </div>
</div>
<div class="row chartsBox">
    <div class="col-md-12 chartCon">
        <div id="shareArticle" class="chartStyle"></div>
        <div class="chartText">
            <i class="tipLogo yesterdayStyle1" data-toggle="tooltip" data-placement="top" title="昨日此时总计">
                昨
            </i>
            <span class="valColor yCurrentTotal yesterdayStyle2">暂无</span>
            <i class="tipLogo todayStyle1" data-toggle="tooltip" data-placement="top" title="今日此时总计">
                今
            </i>
            <span class="valColor tCurrentTotal todayStyle2">暂无</span>
            <i class="tipLogo totalStyle1" data-toggle="tooltip" data-placement="top" title="昨日总计">
                总
            </i>
            <span class="valColor yTotal totalStyle2">暂无</span>
        </div>
    </div>
</div>
<div class="row chartsBox">
    <div class="col-md-12 chartCon">
        <div id="sharePeoples" class="chartStyle"></div>
        <div class="chartText">
            <i class="tipLogo yesterdayStyle1" data-toggle="tooltip" data-placement="top" title="昨日此时总计">
                昨
            </i>
            <span class="valColor yCurrentTotal yesterdayStyle2">暂无</span>
            <i class="tipLogo todayStyle1" data-toggle="tooltip" data-placement="top" title="今日此时总计">
                今
            </i>
            <span class="valColor tCurrentTotal todayStyle2">暂无</span>
            <i class="tipLogo totalStyle1" data-toggle="tooltip" data-placement="top" title="昨日总计">
                总
            </i>
            <span class="valColor yTotal totalStyle2">暂无</span>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        //chartPage.init();
        chartPage.showChart();
        chartPage.showToptip();
    });
    var allData;
    var ipTotal;
    var sharePeoplesData;
    var isLoading = false;
    var ipLoading = false;
    var chartPage = {
        init:function (id,date,timeType) {
            var _this = this;
            _this.setTimer(id,date,timeType);
            //_this.goToDetails();
        },
        showToptip:function () {
            $('[data-toggle="tooltip"]').tooltip();
        },
        showChart:function () {
            isAuth("data:staticsRecord:activeUser")? this.chartOpt('activeUsers','活跃用户'):"";
            isAuth("data:staticsRecord:newUser")?this.chartOpt('shareUsers','新增用户'):"";
            isAuth("data:staticsRecord:newArticle")? this.chartOpt('articleTotal','新增文章'):"";
            isAuth("data:staticsRecord:lockedDomain")?this.chartOpt('badIp','被封域名'):"";
            isAuth("data:staticsRecord:forwardArticle")?this.chartOpt('shareArticle','转发文章数'):"";
            isAuth("staticsRecord:ip:ipCharts")?this.chartOpt('ipTotal','IP数'):'';
            isAuth("chartDetials1:sharePeoples:sharePeoplesCharts")?this.chartOpt('sharePeoples','转发文章人数'):'';
         },

        goToDetails:function () {
            $("#goDetails").click(function () {
                window.location.href = "modules/view/mainDetails.html";
            });
        },
        setHours:function () {
            var hours = [];
            for (let i=0;i<24;i++){
               if(i<10){
                   hours.push(0 + '' + i + ':00');
                }else{
                  hours.push(i + ':00');
               }

             };
            //console.log(hours);
            return hours;
        },
        setTimer:function (id,date,timeType) {
            var _this = this;
            _this.getData(id,date,timeType);
            _this.getIp(id,date,timeType);
            _this.getSharePeoples(id,date,timeType);
        },
        getIp:function (id,date,timeType) {
            var _this = this;
            var data = {
                platformId:id,
                dateTime:date,
                timeType:timeType
            };
            ajaxc({
                    type: "POST",
                    permit:"staticsRecord:ip:ipCharts",
                    url: baseURL+"/ip/getIndexIpChart",
                    data: data,
                    dataType: "json",
                    success: function(result){
                        ipLoading = false;
                        if(result.code == 0){//登录成功
                            //console.log(result.result)
                            ipTotal = result.ipChart;
                            _this.ipTotal(timeType);
                            }else{
                            layer.msg(result.msg);
                        }
                    }
                });

        },
        getData:function (id,date,timeType) {
            var _this = this;
            var data = {
                platformId:id,
                dateTime:date,
                timeType:timeType
            };
            $.ajax({
                    type: "POST",
                    url: baseURL+"statis/getStatisChart",
                    data: data,
                    dataType: "json",
                    success: function(result){
                        isLoading = false;
                        if(result.code == 0){//登录成功
                            //console.log(result.result)
                            allData = result.result;
                            isAuth("data:staticsRecord:activeUser")? _this.activeUsers(timeType):"";
                            isAuth("data:staticsRecord:newUser")?_this.shareUsers(timeType):"";
                            isAuth("data:staticsRecord:newArticle")? _this.articleTotal(timeType):"";
                            isAuth("data:staticsRecord:lockedDomain")?_this.badIp(timeType):"";
                            isAuth("data:staticsRecord:forwardArticle")?_this.shareArticle(timeType):"";
                            //isAuth("chartDetials1:sharePeoples:sharePeoplesCharts")?_this.sharePeoples(timeType):"";
                        }else{
                            layer.msg(result.msg);
                        }
                    }
                });
        },
        getSharePeoples:function (id,date,timeType) {
            var _this = this;
            var data = {
                platformId:id,
                dateTime:date,
                timeType:timeType
            };
            ajaxc({
                type: "POST",
                permit:"chartDetials1:sharePeoples:sharePeoplesCharts",
                url: baseURL+"articleStatis/getForwardArticlePeopleStatisChart",
                data: data,
                dataType: "json",
                success: function(result){
                   if(result.code == 0){//登录成功
                        //console.log(result.result)
                        sharePeoplesData = result.result;
                        _this.sharePeoples(timeType);
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        },
        chartOpt:function (id,title) {
             var _this = this;
             // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(id));
            // console.log(myChart)
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: title
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                color:['#2ec770','#1c97f5'],
                legend: {
                    data:['昨日','今日'],
                    left: '50%',
                },
                grid: {
                    left: '40px',
                    right: '4%',
                    top:'80px',
                    bottom:'3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    name:'时间',
                    nameLocation:'start',
                    data:_this.setHours()
                },
                yAxis: {
                    type: 'value',
                    name:'数量'
                },
                series: [
                    {
                        name:'昨日',
                        type:'line',
                        lineStyle:{
                            color:'#2ec770'
                        },
                        smooth: true,
                        data:[]
                    },
                    {
                        name:'今日',
                        type:'line',
                        areaStyle: {},
                        lineStyle:{
                            color:'#1c97f5'
                        },
                        smooth: true,
                        data:[]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option,true);

        },
        commonOption:function (id,title,yYData,yTData,timeType,xAxis) {
            var _this = this;
            var setOpt  = {};
            var axLabel = {
                formatter:'{value}:00'
            };
            if((title != "IP数")&&(timeType == "minute" )){
                setOpt = {
                    interval:59
                };
            }

            if(timeType != "minute"){
                axLabel = {
                    formatter:function (params) {
                      // console.log(params.value);
                       var val  = params.value;
                       return params.value + " ~ " + params.value.split(":")[0] + ":59";
                    }
                };

            }
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(id));
            // console.log(myChart)
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: title
                },
                tooltip: {
                    trigger: 'axis',
                    formatter:function (params) {
                        //console.log(params,'22222');
                        var data;
                        var html = '<span style="color: #FFFFFF">'+params[0].axisValueLabel+'</span><br />';
                        var perHtml = '';
                        if(params.length > 1){
                            data = calPercent(params[1].value,params[0].value);
                            if(data.perType == 1){
                                perHtml = '<i class="fa fa-long-arrow-up" style="color: red;margin-right: 3px"></i><span style="color: red;">'+data.percent+'</span>';
                            }else if(data.perType == 2){
                                perHtml = '<i class="fa fa-long-arrow-down" style="color: #2ec770;margin-right: 3px"></i><span style="color: #2ec770;">'+data.percent+'</span>';
                            }

                        }
                        params.map(function (item) {
                            if(item.seriesName == '今日'){
                                html = html + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>' + item.seriesName + ':' + addSplit(item.value) + '&nbsp;&nbsp;&nbsp;'+ perHtml;
                            }else{
                                html = html + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>' + item.seriesName + ':' + addSplit(item.value) + '<br/>';
                            }
                        });
                        return html;
                    },
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985',
                            formatter:function (params) {
                                return params.value.toFixed(0)
                            }
                        }
                    }
                },
                color:['#2ec770','#1c97f5'],
                legend: {
                    data:['昨日','今日'],
                    left: '50%',
                },
                grid: {
                    left: '40px',
                    right: '4%',
                    top:'80px',
                    bottom:'3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    name:'时间',
                    nameLocation:'start',
                    data:xAxis,
                        //title=='IP数'?ipTotal.hourList:allData.chartData.xAxis[0],
                    axisPointer:{
                        label:axLabel
                    },
                    axisLabel:setOpt
                    // splitArea:{
                    //     interval:59
                    // },
                    // splitLine:{
                    //     interval:59
                    // }
                },
                yAxis: {
                    type: 'value',
                    name:'数量'
                }
                // ,
                // dataZoom: title=='IP数'?[]:[{
                //     startValue: '00:00'
                // }, {
                //     type: 'inside'
                // }
                // ]
                ,
                series: [
                    {
                        name:'昨日',
                        type:'line',
                        lineStyle:{
                            color:'#2ec770'
                        },
                        smooth: true,
                        data:yYData
                    },
                    {
                        name:'今日',
                        type:'line',
                        areaStyle: {},
                        lineStyle:{
                            color:'#1c97f5'
                        },
                        smooth: true,
                        data:yTData
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option,true);

        },
        activeUsers:function () {
            this.commonOption('activeUsers','活跃用户',allData.chartData.yActiveUser,allData.chartData.tActiveUser,allData.chartData.xAxis[0]);
            $("#activeUsers").siblings(".chartText").find(".tCurrentTotal").text(transData(allData.totalData[4].tTActiveUser));
            $("#activeUsers").siblings(".chartText").find(".yCurrentTotal").text(transData(allData.totalData[4].yActiveUser));
            $("#activeUsers").siblings(".chartText").find(".yTotal").text(transData(allData.totalData[4].yTActiveUser));

            $("#activeUsers").siblings(".chartText").find(".yesterdayStyle1").attr('data-original-title','昨日此时总计'+allData.totalData[4].yActiveUser);
            $("#activeUsers").siblings(".chartText").find(".todayStyle1").attr('data-original-title','今日此时总计'+allData.totalData[4].tTActiveUser)
            $("#activeUsers").siblings(".chartText").find(".totalStyle1").attr('data-original-title','昨日总计'+allData.totalData[4].yTActiveUser)
        },
        shareUsers:function () {
            this.commonOption('shareUsers','新增用户',allData.chartData.yNewUser,allData.chartData.tNewUser,allData.chartData.xAxis[0]);
            $("#shareUsers").siblings(".chartText").find(".tCurrentTotal").text(transData(allData.totalData[3].tTNewUser));
            $("#shareUsers").siblings(".chartText").find(".yCurrentTotal").text(transData(allData.totalData[3].yNewUser));
            $("#shareUsers").siblings(".chartText").find(".yTotal").text(transData(allData.totalData[3].yTNewUser));

            $("#shareUsers").siblings(".chartText").find(".yesterdayStyle1").attr('data-original-title','昨日此时总计'+allData.totalData[3].yNewUser);
            $("#shareUsers").siblings(".chartText").find(".todayStyle1").attr('data-original-title','今日此时总计'+allData.totalData[3].tTNewUser)
            $("#shareUsers").siblings(".chartText").find(".totalStyle1").attr('data-original-title','昨日总计'+allData.totalData[3].yTNewUser)
        },
        ipTotal:function () {
            this.commonOption('ipTotal','IP数',ipTotal.yesTodayIpCount,ipTotal.todayIpCount,ipTotal.hourList);
            //console.log( $("#ipTotal").siblings(".chartText .tCurrentTotal").html())
            $("#ipTotal").siblings(".chartText").find(".tCurrentTotal").text(transData(ipTotal.todayNowCount));
            $("#ipTotal").siblings(".chartText").find(".yCurrentTotal").text(transData(ipTotal.yesterdayNowCount));
            $("#ipTotal").siblings(".chartText").find(".yTotal").text(transData(ipTotal.yesterdayTotalCount));

            $("#ipTotal").siblings(".chartText").find(".yesterdayStyle1").attr('data-original-title','昨日此时总计'+ipTotal.yesterdayNowCount);
            $("#ipTotal").siblings(".chartText").find(".todayStyle1").attr('data-original-title','今日此时总计'+ipTotal.todayNowCount)
            $("#ipTotal").siblings(".chartText").find(".totalStyle1").attr('data-original-title','昨日总计'+ipTotal.yesterdayTotalCount)
        },
        articleTotal:function () {
            this.commonOption('articleTotal','新增文章',allData.chartData.yNewArticle,allData.chartData.tNewArticle,allData.chartData.xAxis[0]);
            $("#articleTotal").siblings(".chartText").find(".tCurrentTotal").text(transData(allData.totalData[0].tTNewArticle));
            $("#articleTotal").siblings(".chartText").find(".yCurrentTotal").text(transData(allData.totalData[0].yNewArticle));
            $("#articleTotal").siblings(".chartText").find(".yTotal").text(transData(allData.totalData[0].yTNewArticle));

            $("#articleTotal").siblings(".chartText").find(".yesterdayStyle1").attr('data-original-title','昨日此时总计'+allData.totalData[0].yNewArticle);
            $("#articleTotal").siblings(".chartText").find(".todayStyle1").attr('data-original-title','今日此时总计'+allData.totalData[0].tTNewArticle)
            $("#articleTotal").siblings(".chartText").find(".totalStyle1").attr('data-original-title','昨日总计'+allData.totalData[0].yTNewArticle)
        },
        badIp:function () {
            this.commonOption('badIp','被封域名',allData.chartData.yLockedDomain,allData.chartData.tLockedDomain,allData.chartData.xAxis[0]);
            $("#badIp").siblings(".chartText").find(".tCurrentTotal").text(transData(allData.totalData[2].tTTLockedDomain));
            $("#badIp").siblings(".chartText").find(".yCurrentTotal").text(transData(allData.totalData[2].yLockedDomain));
            $("#badIp").siblings(".chartText").find(".yTotal").text(transData(allData.totalData[2].yTLockedDomain));

            $("#badIp").siblings(".chartText").find(".yesterdayStyle1").attr('data-original-title','昨日此时总计'+allData.totalData[2].yLockedDomain);
            $("#badIp").siblings(".chartText").find(".todayStyle1").attr('data-original-title','今日此时总计'+allData.totalData[2].tTTLockedDomain)
            $("#badIp").siblings(".chartText").find(".totalStyle1").attr('data-original-title','昨日总计'+allData.totalData[2].yTLockedDomain)
        },
        shareArticle:function () {
            this.commonOption('shareArticle','转发文章数',allData.chartData.yForwardArticle,allData.chartData.tForwardArticle,allData.chartData.xAxis[0]);
            $("#shareArticle").siblings(".chartText").find(".tCurrentTotal").text(transData(allData.totalData[1].tTForwardArticle));
            $("#shareArticle").siblings(".chartText").find(".yCurrentTotal").text(transData(allData.totalData[1].yForwardArticle));
            $("#shareArticle").siblings(".chartText").find(".yTotal").text(transData(allData.totalData[1].yTForwardArticle));

            $("#shareArticle").siblings(".chartText").find(".yesterdayStyle1").attr('data-original-title','昨日此时总计'+allData.totalData[1].yForwardArticle);
            $("#shareArticle").siblings(".chartText").find(".todayStyle1").attr('data-original-title','今日此时总计'+allData.totalData[1].tTForwardArticle)
            $("#shareArticle").siblings(".chartText").find(".totalStyle1").attr('data-original-title','昨日总计'+allData.totalData[1].yTForwardArticle)
        },
        sharePeoples:function () {
            this.commonOption('sharePeoples','转发文章人数',sharePeoplesData.chartData.yCount,sharePeoplesData.chartData.tCount,sharePeopleData.chartData.xAxis[0]);
            $("#sharePeoples").siblings(".chartText").find(".tCurrentTotal").text(transData(sharePeoplesData.totalData[0].tTCount));
            $("#sharePeoples").siblings(".chartText").find(".yCurrentTotal").text(transData(sharePeoplesData.totalData[0].yCount));
            $("#sharePeoples").siblings(".chartText").find(".yTotal").text(transData(sharePeoplesData.totalData[0].yTCount));

            $("#sharePeoples").siblings(".chartText").find(".yesterdayStyle1").attr('data-original-title','昨日此时总计'+sharePeoplesData.totalData[0].yCount);
            $("#sharePeoples").siblings(".chartText").find(".todayStyle1").attr('data-original-title','今日此时总计'+sharePeoplesData.totalData[0].tTCount)
            $("#sharePeoples").siblings(".chartText").find(".totalStyle1").attr('data-original-title','昨日总计'+sharePeoplesData.totalData[0].yTCount)
        }
    };
</script>